<template>
    <el-table
        ref="queryFormRef"
        :data="tableData"
        style="width: 100%"
        class="app-container-table"
        v-loading="loading"
        :cell-style="{ padding: '0px', height: '45px' }"
        :header-cell-style="{
            height: '50px',
        }"
    >
        <template v-for="(item, index) in tableHead" :key="index">
            <el-table-column
                v-if="item.label !== '操作'"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :min-width="item.width"
                :show-overflow-tooltip="true"
                align="center"
            >
                <template v-if="item.label === '状态'" #default="scope">
                    <el-switch
                        v-model="scope.row.status"
                        @change="statusSwitchBtnClick(scope.row)"
                        class="ml-2"
                        width="60"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="正常"
                        inactive-text="禁用"
                    />
                </template>
            </el-table-column>

            <el-table-column
                v-if="item.label === '操作'"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :min-width="item.width"
                :show-overflow-tooltip="true"
                fixed="right"
                align="center"
            >
                <template #default="scope">
                    <el-button
                        v-for="ele in toDoRow"
                        link
                        type="primary"
                        size="small"
                        :icon="ele.icon"
                        @click.stop="handleUserOpenDialog(ele.name, scope)"
                        >{{ ele.name }}</el-button
                    >
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>

<script setup lang="ts">
import { tableHead, toDoRow } from "../index";
import UserAPI from "@/api/system/user";
const emit = defineEmits(["handleUserOpenDialog", "reFresh"]);

const loading = defineModel("loading", {
    type: Boolean,
    required: true,
    default: false,
});
const props = defineProps({
    tableData: {
        required: true,
        default: () => [] as any,
    },
});

/**
 * 状态switch按钮
 */
const statusSwitchBtnClick = (scoped: any) => {
    const params = {
        id: scoped.id,
        status: scoped.status,
    };
    loading.value = true;
    UserAPI.updateStatus(params)
        .then(() => {
            ElMessage.success("修改成功");
        })
        .catch(() => {
            ElMessage.error("修改失败");
        })
        .finally(() => {
            loading.value = false;
            emit("reFresh");
        });
};

/**
 * 重置密码
 */
const resetPassWord = (item: any) => {
    console.log(item);
    const params = {
        id: item.row.id,
    };

    UserAPI.resetPassword(params)
        .then(() => {
            ElMessage.success("修改成功");
        })
        .catch(() => {
            ElMessage.error("修改失败");
        })
        .finally(() => {
            emit("reFresh");
        });
};

// 编辑  查看 重置密码   打开弹窗
const handleUserOpenDialog = (type: string, item: any) => {
    if (type === "重置密码") {
        resetPassWord(item);
    }
    emit("handleUserOpenDialog", {
        type,
        item,
    });
};
</script>

<style lang="scss" scoped>
.app-container-table {
    overflow-x: auto;
    :deep(thead) {
        height: 58px;
        font-size: 14px;
        color: #222222;
        font-weight: bold;
        tr,
        tr > th {
            background-color: #f5f5f5;
        }
    }
    :deep(th.el-table-fixed-column--right) {
        background-color: #f5f5f5;
    }
}
</style>
